<template>
  <scroll :onInfinite="on_Infinite" class="c1529050489809">
    <slot name="cover" slot="cover"></slot>
    <slot></slot>
    <div v-if="no_more" slot="infinite" class="tc text3">没有更多数据</div>
    <div v-else slot="infinite" class="tc text3">加载中...</div>
  </scroll>
</template>
<script>
  import scroll from './scroll.vue'

  let limit = 5
  export default {
    props: {
      onInfinite: {
        type: Function,
        required: true
      },
      active: {
        default: true
      }
    },
    data() {
      return {
        page: 1,
        no_more: false,
        limit_count: 1,
      }
    },
    async created() {
      if (!this.active) return;
      await this.$nextTick()
      this.init()
    },
    computed: {},
    methods: {
      async on_Infinite(next) {
        try {
          this.no_more = await this.onInfinite(this.page) ? true : false
          if (!this.no_more) {
            this.page++
            next && next()
            this.init()
          }
        } catch (e) {
          this.no_more = true
          if (e instanceof TypeError) {
            console.warn(e) // for debug
          } else {
            console.error(e) // for debug
          }
        }
      },
      async init() {
        // 防止死循环
        if (this.limit_count >= limit) {
          return
        }
        this.limit_count++
        await this.$nextTick()
        let wrap = this.$el.offsetHeight
        let inner = this.$el.querySelector('.scroll-inner').offsetHeight
        // console.log(wrap,inner)
        if (inner <= wrap) {
          this.on_Infinite()
        }
      },
      reset () {
        Object.assign(this, this.$options.data())
        this.on_Infinite()
      }
    },
    components: {scroll}
  }
</script>

<style type="text/scss" lang="scss">
  .c1529050489809 .scroll-inner {
    transform: none!important;
  }
</style>
<style type="text/scss" lang="scss" scoped>

</style>
